<template>
  <div class="consignment-management">
    <!-- 搜索模块 -->
    <SearchForm
      label-width="70px"
      :data="consignmentSearchForm"
      @searchForm="searchForm"
      @resetForm="resetForm"
      @focuskey="focusKey"
      @remoteMethod="remoteMethod"
      :submit-loading='submitLoading'
    />
    <!-- 表格模块 -->
    <el-editable
      ref="productTable"
      v-loading="tableLoading"
      :data="productList"
      height="400"
      :custom-attr="$TABLE_HEAD['beforeSettle.distributorSide.consignment']"
      :columns="consignmentProductColumns"
    >
      <template
        slot="default-minNum"
        slot-scope="scope">
        <el-input
          style="width: 100px;"
          v-if="rowEditStatus[scope.row.id]"
          v-model="scope.row.minNum"
        />
        <span v-else>{{ scope.row.minNum }}</span>
        <el-button
          size="small"
          type="text"
          v-if="rowEditStatus[scope.row.id]"
          :loading="rowSubmitLoading[scope.row.id]"
          @click="submitMinNumChange(scope.row)"
        >确定</el-button>
        <el-button
          v-else
          size="small"
          type="text"
          @click="editRowMinNum(scope.row)"
        >编辑</el-button>
      </template>
      <!-- 审核 -->
      <template
        slot="default-action"
        slot-scope="scope">
        <el-button
          size="small"
          @click.stop="jumpConfigPage(scope.row)"
          type="text text-primary">寄售设置</el-button>
      </template>
    </el-editable>
    <!-- 分页模块 -->
    <el-pagination
      class="pagination"
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="PAGE_NUMBER"
      :page-size="pageSize"
      :layout="PAGINATION_LAYOUT"
      :total="totalElements"
    />
  </div>
</template>
<script>
import ElEditable from '@components/el-editable/index.vue'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import { consignmentProductColumns, consignmentSearchForm } from './const'
export default {
  components: {
    ElEditable, SearchForm
  },
  data () {
    return {
      submitLoading: false,
      consignmentProductColumns,
      consignmentSearchForm,
      searchQuery: {},
      tableLoading: false,
      productList: [],
      rowEditStatus: {}, // 用于记录每一行是否正在编辑寄售数量下限
      rowSubmitLoading: {}, // 用于处理第一行提交下限时的loading状态
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0
    }
  },
  watch: {
    'productList.length' () { // 初始化rowEditStatus和rowSubmitLoading，否则不会响应
      this.productList.map(item => {
        this.$set(this.rowEditStatus, item.id, false)
        this.$set(this.rowSubmitLoading, item.id, false)
      })
    }
  },
  mounted () {
    this.getProductList()
  },
  methods: {
    getProductList () {
      this.submitLoading = true
      this.productList = [
        {
          productCode: 'XH3283823',
          productName: '测试产品名称一',
          productSpec: 'KG20*1',
          factory: '河南卫龙医疗器械有限公司',
          certificateNo: '国械注准20153460582',
          category: '口腔',
          unit: '6瓶/箱',
          minNum: 0.2
        },
        {
          productCode: 'XH3283823',
          productName: '测试产品名称一',
          productSpec: 'KG20*1',
          factory: '河南卫龙医疗器械有限公司',
          certificateNo: '国械注准20153460582',
          category: '口腔',
          unit: '6瓶/箱',
          minNum: 0.2
        }
      ]
      this.submitLoading = false
    },
    searchForm (condition) {
      this.curPage = 1
      this.searchQuery = condition
      this.getProductList()
    },
    resetForm (condition) {
      this.curPage = 1
      this.searchQuery = condition
      this.getProductList()
    },
    focusKey () {},
    remoteMethod () {},
    handleSizeChange (size) {
      this.pageSize = size
      this.getProductList()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getProductList()
    },
    editRowMinNum (row) {
      this.$set(this.rowEditStatus, row.id, !this.rowEditStatus[row.id])
    },
    submitMinNumChange (row) {
      this.rowSubmitLoading[row.id] = true
      this.$axios.post('#', {
        id: row.id,
        minNum: row.minNum
      })
        .then(({ data }) => {})
        .catch(e => {})
        .finally(() => {
          this.rowSubmitLoading[row.id] = false
        })
    },
    jumpConfigPage (row) {
      const path = '/distributorSide/basicInfoManagement/consignment/setting'
      const query = {
        id: row.id
      }
      this.$router.push({ path, query })
    }
  }
}
</script>

<style lang="less">

.consignment-management {
  height: 100%;
  overflow: auto;
  position: relative;

  .pagination {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>
